<template>
  <div class="box">
    <el-tabs v-model="flag">
      <el-tab-pane label="基本信息" name="1" />
      <el-tab-pane label="审查流程" name="2" />
    </el-tabs>
    <div v-show="flag=='2'" class="MainBox1">
      <optionList :option-list-code="optionListCode" />
    </div>
    <div v-show="flag=='1'" class="mainBox">
      <div class="basicInfo">
        <div class="basicInfo_title">项目基本信息</div>
        <div class="basicInfo_content">
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div class="basic">
                <strong>项目名称：</strong>
                {{ dataInfo.name }}
              </div>
            </el-col>
            <el-col :span="8">
              <div class>
                <b>项目级别：</b>
                {{ dataInfo.levelStr }}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic">
                <strong>所属区县：</strong>
                {{ dataInfo.districtName }}
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div>
                <b>乡镇：</b>
                {{ dataInfo.townName }}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic">
                <strong>行政村：</strong>
                {{ dataInfo.villageName }}
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <b>项目编号：</b>
                {{ dataInfo.number }}
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div class="basic">
                <strong>红线面积：</strong>
                {{ dataInfo.hxmj }}公顷
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <b>减少建设用地面积：</b>
                {{ dataInfo.yjjsj }}公顷
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic">
                <strong>实施规模：</strong>
                {{ dataInfo.ssgm }}公顷
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div>
                <b>指标使用类型：</b>
                {{ dataInfo.projectIndexName }}
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <b>项目类型：</b>
                {{ dataInfo.projectTypeName }}
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="basicInfo">
        <div class="basicInfo_title">建设信息</div>
        <div class="basicInfo_content">
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div class="basic">
                <strong>预计建设规模：</strong>
                {{ dataInfo.jsgm }}公顷
              </div>
            </el-col>
            <el-col :span="8">
              <div class>
                <b>预计新增耕地面积：</b>
                {{ dataInfo.xzgdmj }}公顷
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic">
                <strong>预计新增耕地比例：</strong>
                {{ dataInfo.xzgdbl }}
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div>
                <b>预计新增耕地亩均投资：</b>
                {{ dataInfo.xzgdmjtz }}万元/亩
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic">
                <strong>预计建设规模均投资：</strong>
                {{ dataInfo.jsgmtz }}万元/亩
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <b>预计建新规模：</b>
                {{ dataInfo.jxgm }}公顷
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="el_row">
            <el-col :span="8">
              <div class="basic">
                <strong>预计建设开始时间：</strong>
                {{ dataInfo.planConstructingStartTime }}
              </div>
            </el-col>
            <el-col :span="8">
              <div>
                <b>预计建设结束时间：</b>
                {{ dataInfo.planConstructingEndTime }}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="basic">
                <strong>资金来源：</strong>
                {{ dataInfo.fundSourceStr }}
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="basicInfo">
        <div class="basicInfo_title">区县意见</div>
        <div class="basicInfo_content basicInfo_options">
          <div class="options">
            <p>区县中心审查意见</p>
            <div class="boxItem_content_row_item_noFlex_textarea">
              <el-input
                v-model="centerValue"
                type="textarea"
                placeholder="请输入内容"
                :rows="3"
                :readonly="isReadonly"
              />
            </div>
            <el-row class="options_row">
              <el-col :span="8">
                <div class="options_row_title">
                  <p>审查人：</p>
                  <div class="options_row_img">
                    <img :src="$https + shencharen" />
                    <!-- <el-input :disabled="true" v-model="shencharen" suffix placeholder="请输入内容"></el-input> -->
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="options_row_title">
                  <p>审查时间：</p>
                  <el-date-picker
                    v-model="dateValue"
                    type="date"
                    :readonly="isReadonly"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间"
                  />
                </div>
              </el-col>
              <el-col v-if="!isReadonly" :span="8">
                <div class="options_row_title">
                  <p>审查状态：</p>
                  <el-select v-model="shenchaStatus" placeholder="请选择">
                    <el-option label="同意" value="APPROVED" />
                    <el-option label="拒绝" value="REJECTED" />
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div v-if="isQxzzBtn" class="btn">
        <el-button size="medium" type="primary" :loading="isLoading" @click="btnQuxianCenter">提交</el-button>
        <el-button size="medium" @click="btnCancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  selectQuInfo,
  saveDistrictCenterOpinion,
  getQuOpinion
} from "@/api/storageForRecordInfo";
import { getTime } from "@/api/getTime";
import { findById } from "@/api/common";
import optionList from "@/components/optionList";
export default {
  components: {
    optionList
  },
  data() {
    return {
      optionListCode: "StoringRecordSave",
      dataInfo: "",
      centerValue: "", // 区县中心意见
      dateValue: "", // 日期
      shencharen: "",
      shenchaStatus: "",

      isLoading: false,
      isReadonly: false,
      isQxzzBtn: false,
      userIcon: "", // 用户签名照
      flag: "1"
    };
  },
  created() {
    this.dateValue = getTime();
    this.getSelect();
    this.getOpinion();
    if (
      localStorage.getItem("router") ==
      "STORING_RECORD_FIRST_AUDIT_FIRST_OPINION"
    ) {
      this.isReadonly = false;
      if (localStorage.getItem("menusName") == "ROLE_QXZZJG") {
        this.isReadonly = false;
        this.isQxzzBtn = true;
      } else {
        this.isReadonly = true;
        this.isQxzzBtn = false;
      }
    } else {
      this.isReadonly = true;
      this.isQxzzBtn = false;
    }
    if (localStorage.getItem("lookStatus") == 2) {
      this.isReadonly = true;
      this.isQxzzBtn = false;
    }
  },
  methods: {
    // 获取用户信息
    userInfo() {
      var data = {
        id: localStorage.getItem("userId")
      };
      findById(data).then(res => {
        this.userIcon = res.data.signedPhoto;
      });
    },
    getOpinion() {
      const obj = {
        projectId: localStorage.getItem("projectId")
      };
      getQuOpinion(obj).then(res => {
        if (res.data != null) {
          this.centerValue =
            res.data.districtCenterCheckOpinion != null
              ? res.data.districtCenterCheckOpinion
              : "";
          this.shencharen =
            res.data.districtCenterAuditor != null
              ? res.data.districtCenterAuditor.signedPhoto
              : this.$store.state.user.userInfo.signedPhoto;
          this.dateValue =
            res.data.districtCenterCheckDate != null
              ? res.data.districtCenterCheckDate
              : getTime();
          this.shenchaStatus = res.data.districtCenterAuditResult;
        }
      });
    },
    btnQuxianCenter() {
      const obj = {
        projectId: localStorage.getItem("projectId"),
        checkOpinion: this.centerValue,
        checkCensorId: localStorage.getItem("userId"),
        checkDate: this.dateValue,
        auditResult: this.shenchaStatus
      };
      this.isLoading = true;
      saveDistrictCenterOpinion(obj)
        .then(res => {
          this.isLoading = false;
          this.$confirm("提交成功,是否编辑入库核查备案申请表？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "success"
          })
            .then(() => {
              this.$router.push({
                path:
                  "/entryRecordApplication/archiveData/entryApplicationTable"
              });
            })
            .catch(() => {
              this.$router.push({
                path: "/xmkgh/ywdeal"
              });
            });
          this.getOpinion();
          this.$refs.optionList.getProgress();
        })
        .catch(() => {
          this.isLoading = false;
        });
    },
    getSelect() {
      // 查询
      let obj = {
        projectId: localStorage.getItem("projectId")
      };
      selectQuInfo(obj).then(res => {
        this.dataInfo = res.data;
      });
    },
    btnCancel() {
      this.centerValue = "";
      this.dateValue = "";
      this.shenchaStatus = "";
    }
  }
};
</script>

<style lang="scss" scoped>
.form /deep/ .el-input__inner {
  width: 200px;
}

.box {
  margin: 30px;
  border: 1px solid #efefef;
  border-top: none;
  border-radius: 5px;
  // background: #fff;
  .box_ifram {
    width: 600px;
    height: 400px;
    border: 1px solid black;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -25%;
    margin-top: -10%;
  }

  .basicInfo {
    .basicInfo_title {
      height: 50px;
      background: #f8f8f8;
      padding: 0px 30px;
      line-height: 50px;
      color: #333;
      font-size: 18px;
      font-weight: bold;
      border-top: 1px solid #efefef;
      border-bottom: 1px solid #efefef;
    }

    .basicInfo_content {
      padding: 30px 40px;

      .select_bxo {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        div {
          font-size: 14px;
          color: #444;
        }
        .input {
          width: 200px;
          margin: 0px 20px 0px 10px;
        }
      }
      /deep/ .el_row {
        margin-bottom: 25px;
        line-height: 22px;
        div {
          font-size: 13px;
          color: #606266;
          display: flex;
          align-items: center;
          b {
            color: #444444;
            margin-right: 10px;
          }
          strong {
            color: #444444;
            margin-right: 10px;
          }
        }
      }
    }

    .basicInfo_content_title {
      display: flex;
      // justify-content: space-between;
    }
    .basicInfo_two {
      /deep/ .el_row {
        div {
          b {
            width: 150px;
            text-align: right;
            margin-right: 10px;
          }
          strong {
            width: 150px;
            text-align: right;
            margin-right: 10px;
          }
        }
        .basicInput {
          .basicInput_title {
            width: 150px;
          }
          .basicInput_title1 {
            width: 150px;
          }
        }
      }
    }
  }
  .basic_row {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #444;
    font-weight: bold;
    margin-bottom: 25px;
    span {
      margin-right: 20px;
    }
  }
  .basicInfo_options {
    padding: 0px 40px;
    .options {
      font-size: 13px;
      font-weight: bold;
      color: #444;

      .options_row {
        margin-top: 15px;
        display: flex;
        align-items: center;
        .options_row_title {
          display: flex;
          align-items: center;

          .options_row_img img {
            width: 105px;
            height: 59px;
            margin-left: 20px;
          }
        }
      }
    }
  }

  .btn {
    margin-bottom: 20px;
    margin-left: 50px;
  }
}
.boxItem_content_row_item_noFlex_textarea {
  width: 90%;
}
</style>
